<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>

<body>
  <style>
    .header {
      font-size: 20px;
      margin: 10px;
      padding: 5px;
      background-color: #f0f0f0;
    }
  </style>
  <div id="app">
    {{num}}<button @click="num++">+</button>
    <q-header :a="num" title="首页"></q-header>
  </div>
</body>
<script>
  const { createApp, ref, computed } = Vue;

  const app = createApp({
    setup() {
      let num = ref(1)
      return {
        num
      }
    }
  })
  // component 组件
  app.component('q-header', {
    // props: ['a', 'title'], //乞丐版
    props:{
      a:[Number,String],    //升级版
      title:String
    },
    // props:{
    //   a:{
    //     type:[Number,String],//类型限制
    //     required:true,//是否必填
    //     default:666,//默认值
    //     validator(val) {
    //       if(val%2 === 0) {
    //         return true
    //       }else{
    //         //校验错误
    //         return false
    //       }
    //     }
    //   }
    // },
    setup(props) {
      let title = props.title;
      // computed  计算属性
      // 参与动态响应，需要使用computed包装
      let a = computed(function () {
        return props.a
      })
      return {
        title,
        a
      }
    },
    template: `<div class="header">
      {{a}}
      {{title}}</div>`
  })


  app.mount('#app')
</script>

</html>